<script>
export default {
  name: "tabber",
  props: {
    tabbarIndex: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      tabbarList: [
        {
          id: 1,
          pagePath: "/pages/index/index",
          iconPath: "/static/tabbar/home.png",
          selectedIconPath: "/static/tabbar/home_active.png",
          text: "首页",
          width: '54rpx',
          height: '54rpx',
          isRound: false
        },
        {
          id: 2,
          pagePath: "/pages/QuanZi/make_money",
          iconPath: "/static/tabbar/money.png",
          selectedIconPath: "/static/tabbar/money_active.png",
          text: "赚钱",
          width: '54rpx',
          height: '54rpx',
          isRound: false
        },
        {
          id: 3,
          pagePath: "/pages/reward/reward",
          iconPath: "/static/tabbar/reward.png",
          selectedIconPath: "/static/tabbar/reward.png",
          text: "赏金广场",
          width: '100rpx',
          height: '100rpx',
          isRound: true
        },
        {
          id: 4,
          pagePath: "/pages/orders/orders_gf",
          iconPath: "/static/tabbar/order.png",
          selectedIconPath: "/static/tabbar/order_active.png",
          text: "订单",
          width: '54rpx',
          height: '54rpx',
          isRound: false
        },
        {
          id: 5,
          pagePath: "/pages/WoDe/WoDe",
          iconPath: "/static/tabbar/my.png",
          selectedIconPath: "/static/tabbar/my_active.png",
          text: "我的",
          width: '54rpx',
          height: '54rpx',
          isRound: false
        }
      ],
      active: 1,
      isRound: false,
    }
  },
  mounted() {
    this.active = this.tabbarIndex
  },
  /* watch: {
    tabbarIndex(newVal, oldVal) {
      console.log('点击tab=',  newVal)
      this.active = newVal
    }
  }, */
  methods: {
    tabbarChange(item) {
      console.log('点击index=',  item.id)
      this.$emit('updateTabbar', item.id)
      uni.switchTab({
        url: item.pagePath
      });
    }
  }
}
</script>

<template>
  <view class="tabbar-box flex items-center">
    <view class="tabbar_content">
      <!-- isRound是中间凸出样式的标志，用来判断当前子级是否是凸出样式的 -->
      <view :class="!item.isRound ? 'square' : 'is-square'" v-for="(item, index) in tabbarList" :key="index" @click="tabbarChange(item)">
        <!-- 不是凸出的子级 -->
        <template v-if="!item.isRound">
          <view class="item-top flex justify-center flex-col">
            <u-image :src="active === item.id ? item.selectedIconPath : item.iconPath" :width="item.width"
                     :height="item.height"></u-image>
          </view>
          <view class="item-bottom" :class="{'active': active === item.id}">
            <text>{{ item.text }}</text>
          </view>
        </template>
        <!-- 凸出的子级 -->
        <template v-else>
          <view class="flex flex-col justify-center items-center center-round">
            <view class="flex flex-col justify-center items-center">
              <view class="center_round_img" :style="{width: item.width, height: item.height,margin: '0 auto'}">
                <image :src="active === item.id ? item.selectedIconPath : item.iconPath" :width="item.width"
                       :height="item.height" mode="widthFix" style="width: 100%;"></image>
              </view>
              <text class="center_round_text" :class="{'round-active': active === item.id}">{{ item.text }}</text>
            </view>
          </view>
        </template>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
.tabbar-box {

  .tabbar_content{
    height: 120rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .square {
      width: 100%;
      height: 130rpx;

      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .round-active {
        color: #207BDB;
      }
    }
    .square .item-top {
      width: 56rpx;
      height: 56rpx;
    }
    .is-square {
      width: 100%;
      height: 130rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      .center_round_img{

      }
      .round-active {
        font-weight: bold;
      }
    }
    .center-round {
      width: 100%;
      height: 130rpx;
      background: url('');
      background-position: center top;
      background-size: 100% 42rpx;
      background-repeat: no-repeat;
      position: absolute;
      margin-top: -72rpx;
      text-align: center;

      .center_round_text {
        font-weight: 500;
        font-size: 24rpx;
        color: #333333;
        position: absolute;
        bottom: -18rpx;
        left: 0;
        right: 0;
        margin: auto;
      }
    }

    .item-bottom {
      font-weight: 500;
      font-size: 24rpx;
      color: #555B66;
      margin-top: 10rpx;
    }

    .active {
      font-weight: bold;
    }
  }

}
</style>